<template>
    <view class="page">
        <view class="page-item" @click="skipMessage(0)">
            <view class="page-item-left">
                <img :src="File_Url+'system-news.png'" />
            </view>
            <view class="page-item-center">
                <text>系统通知</text>
            </view>
            <view class="page-item-right">
                <text v-if="messageNumber.system_message>0">{{messageNumber.system_message}}</text>
                <img :src="File_Url+'right-grey.png'" />
            </view>
        </view>
        <view class="page-item" @click="skipMessage(1)">
            <view class="page-item-left">
                <img :src="File_Url+'needs-news.png'" />
            </view>
            <view class="page-item-center">
                <text>需求消息</text>
            </view>
            <view class="page-item-right">
                <text v-if="messageNumber.demand_message>0">{{messageNumber.demand_message}}</text>
                <img :src="File_Url+'right-grey.png'" />
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "message",
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                messageNumber:''
            }
        },
        onShow(){
            this.getMyMessageNumber();
        },
        methods:{
            //未读消息数量
            async getMyMessageNumber(){
                const res = await this.$api.getMyMessageNumber({user_token: uni.getStorageSync('userToken')});
                if (res.data.level == 'success'){
                    this.messageNumber = res.data.data
                }
            },
            skipMessage(id){
                if (id==0){
                    uni.navigateTo({
                        url:'/pages/message/systemMessage/systemMessage?type=system'
                    })
                } else if (id==1){
                    uni.navigateTo({
                        url:'/pages/message/needsMessage/needsMessage?type=demand'
                    })
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page-item{
        padding: 0 30rpx;
        height: 140rpx;
        @include flex(flex-start);
        flex-direction: row;
        border-bottom: 2rpx solid #E5E5E5;
        .page-item-left{
            width: 100rpx;
            height: 100rpx;
            overflow: hidden;
            border-radius: 360rpx;
        }
        .page-item-center{
            padding: 0 20rpx;
            text{
                font-size: 34rpx;
                line-height: 48rpx;
                height: 48rpx;
                font-weight: ceil(600);
            }
        }
        .page-item-right{
            margin-left: auto;
            @include flex();
            flex-direction: row;
            text{
                text-align: center;
                width: 40rpx;
                height: 40rpx;
                line-height: 40rpx;
                font-size: 28rpx;
                background: #FF6565;
                border-radius: 360rpx;
                color: #ffffff;
            }
            img{
                width: 30rpx;
                height: 30rpx;
                margin-left: 20rpx;
            }
        }
    }
</style>